import React from 'react'
import axios from 'axios'
import styles from './style.less'

export default class App extends React.Component {

	constructor(props) {
		super(props)
		this.state = {
			Map: null
		}
	}

	componentDidMount() {
		setTimeout(()=>{
			this.initMap()
			this.loadMap()
		},100)
	}

	// 初始化地图
	initMap(){
		// 创建地图
		console.log(APP_URL)
		this.state.Map = new d2c.map({
            container: 'map',
			center: [
				113.911324,
				22.754219
			],
			style: 'http://106.14.65.62/oms/static/stylejson/181.json',
			zoom: 11.5,
            minZoom: 10,
            maxZoom: 18,
            localIdeographFontFamily: `'Arial', 'Noto Sans CJK SC', sans-serif`
        })
	}

	// 地图加载完成后
	loadMap(){
		var This = this
		this.state.Map.on("load", function () {
			// 添加水系列样式
            This.state.Map.addGeoLayer({
                "id": "waterSystem",
                "type": "fill",
                "paint": {
                    "fill-color": "#266494"
                }
            })

			// 添加水系列图层
			axios.get('/data/water_system.json').then( (response)=> {
				// 设置数据
				console.log(response.data)
				This.state.Map.setGeojson('waterSystem', response.data)
			}).catch(function (error) {
				console.log(error)
			})
		})
	}

	render() {
		return (
			<div className={styles.main}>
				<div id="map"></div>
			</div>
		)
	}
}